import React, { Component } from 'react';
import { View, Text, FlatList, Image, TouchableOpacity, Modal } from 'react-native';
import request from "../../../utils/request";
import { BASE_URI, QZ_DT_DZ, MY_TRENDS } from "../../../utils/pathMap";
import IconFont from "../../../components/IconFont";
import { pxToDp } from "../../../utils/stylesKits";
import date from "../../../utils/date";
import Toast from '../../../utils/Toast';
import JMessage from "../../../utils/JMessage";
import { inject, observer } from 'mobx-react';
import ImageViewer from 'react-native-image-zoom-viewer';
import { NavigationContext } from "@react-navigation/native";
import Validator from "../../../utils/validator";
import { EMOTIONS_DATA } from "../../../components/Emotion/datasource";
import THNav from "../../../components/THNav";
@inject('UserStore')
@observer

class Index extends Component {
    static contextType = NavigationContext;
    params = {
        page: 1,
        pagesize: 4
    }
    totalPages = 2;
    isLoading = false;
    state = {
        list: [],
        showAlbum: false,
        imgUrls: [],
        currentIndex: 0
    }

    componentDidMount() {
        this.getList();
    }

    // 渲染富文本内容
    rendeRichText = (text) => {
        const list = Validator.renderRichText(text);
        return list.map((v, i) => {
            if (v.text) {
                return <Text style={{ color: '#666' }} key={i}>{v.text}</Text>;
            } else if (v.image) {
                return <Image key={i} style={{ width: pxToDp(25), height: pxToDp(25) }} source={EMOTIONS_DATA[v.image]} />;
            } else {
                return <></>;
            }
        })
    }

    // 获取推荐动态的数据
    getList = async (isNew = false) => {
        const res = await request.privateGet(MY_TRENDS, this.params)
        // console.log(res);
        if (isNew) {
            // 重置数据
            this.setState({ list: res.data });
        } else {
            this.setState({ list: [...this.state.list, ...res.data] });
        }
        this.totalPages = res.pages;
        this.isLoading = false;
    }

    // 滚动条触底事件
    onEndReached = () => {
        // 1.判断还有没有下一页数据
        // 2.节流阀
        if ((this.params.page >= this.totalPages) || this.isLoading) {
            return;
        } else {
            // 还有下一页数据
            this.isLoading = true;
            this.params.page++;
            this.getList();
        }
    }

    // 点击相册图片放大
    handleShowAlbum = (index, ii) => {
        const imgUrls = this.state.list[index].images.map(v => ({ url: BASE_URI + v.thum_img_path }));
        this.setState({ imgUrls, currentIndex: ii, showAlbum: true });
    }

    // 跳转到评论页面
    goComment = (item) => {
        this.context.navigate('Comment', item);
    }

    render() {
        const { list, imgUrls, currentIndex, showAlbum } = this.state;
        const user = this.props.UserStore.user
        return (
            <>
                <THNav title="我的动态" />
                <FlatList
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={0.1}
                    data={list}
                    keyExtractor={v => v.tid + ''}
                    renderItem={({ item, index }) => <><View
                        key={index}
                        style={{ padding: pxToDp(10), borderBottomColor: '#ccc', borderBottomWidth: pxToDp(1) }}
                    >
                        {/* 用户信息 */}
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <View
                                style={{ paddingRight: pxToDp(10) }}
                            >
                                <Image
                                    style={{ width: pxToDp(40), height: pxToDp(40), borderRadius: pxToDp(20) }}
                                    source={{ uri: BASE_URI + user.header }} />
                            </View>
                            <View style={{ flex: 2, justifyContent: 'space-around', paddingLeft: pxToDp(10) }}>
                                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                    <Text style={{ color: '#555' }}>{user.nick_name}</Text>
                                    <IconFont
                                        style={{ fontSize: pxToDp(18), color: user.gender === '男' ? '#b564bf' : 'red', marginLeft: pxToDp(7), marginRight: pxToDp(7) }}
                                        name={user.gender === '女' ? 'icontanhuanv' : 'icontanhuanan'} />
                                    <Text style={{ color: '#555' }}>{user.age}岁</Text>
                                </View>
                                <View style={{ flexDirection: 'row' }}>
                                    <Text style={{ color: '#555' }}>{user.marry}</Text>
                                    <Text style={{ color: '#555', marginLeft: pxToDp(5), marginRight: pxToDp(5) }}>|</Text>
                                    <Text style={{ color: '#555' }}>{user.xueli}</Text>
                                    <Text style={{ color: '#555', marginLeft: pxToDp(5), marginRight: pxToDp(5) }}>|</Text>
                                    <Text style={{ color: '#555' }}>{user.agediff < 10 ? "年龄相仿" : "有点代沟"}</Text>
                                </View>
                            </View>

                        </View>

                        {/* 动态内容 */}
                        <View style={{ marginTop: pxToDp(8), flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center' }}>
                            {this.rendeRichText(item.content)}
                        </View>

                        {/* 相册 */}
                        <View style={{ flexDirection: 'row', flexWrap: 'wrap', paddingTop: pxToDp(5), paddingBottom: pxToDp(5) }}>
                            {
                                item.images.map((vv, ii) => <TouchableOpacity key={ii} onPress={() => this.handleShowAlbum(index, ii)}><Image
                                    style={{ width: pxToDp(70), height: pxToDp(70), marginRight: pxToDp(5) }}
                                    source={{ uri: BASE_URI + vv.thum_img_path }} />
                                </TouchableOpacity>)
                            }
                        </View>

                        {/* 距离和时间 */}
                        <View>
                            <View style={{ flexDirection: 'row', paddingTop: pxToDp(5), paddingBottom: pxToDp(5) }}>
                                <Text style={{ color: '#666' }}>距离 {item.dist} km</Text>
                                <Text style={{ color: '#666', marginLeft: pxToDp(8) }}>{date(item.create_time).fromNow()}</Text>
                            </View>
                        </View>

                        {/* 三个小图标 */}
                        <View style={{ flexDirection: 'row' }}>
                            <TouchableOpacity
                                style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                                <IconFont style={{ color: '#666' }} name="icondianzan-o" /><Text style={{ color: '#666' }}>{item.star_count}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={this.goComment.bind(this, item)}
                                style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                                <IconFont style={{ color: '#666' }} name="iconpinglun" /><Text style={{ color: '#666' }}>{item.comment_count}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity>
                            </TouchableOpacity>
                        </View>
                    </View>
                        {(this.params.page >= this.totalPages) && (index === list.length - 1) ? <View style={{ height: pxToDp(60), alignItems: 'center' }}><Text style={{ color: '#666', marginTop: pxToDp(8) }}>没有更多数据了~</Text></View> : <></>}
                    </>
                    }
                />
                <Modal visible={showAlbum} transparent={false} animationType={'fade'}>
                    <ImageViewer
                        onClick={() => this.setState({ showAlbum: !showAlbum })}
                        imageUrls={imgUrls}
                        index={currentIndex} />
                </Modal>

            </>
        );
    }
}

export default Index;